<template>
  <div class="login">
    <div class="out">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>

    <UserPut
      type="text"
      UserText="用户名/手机号码"
      :rule="Usernamerule"
      errMsg="用户名或手机号码错误"
      @valChanged="setUsername"
    />
    <UserPut
      type="text"
      UserText="昵称"
      :rule="UserPocorrule"
      errMsg="昵称错误"
      @valChanged="Sethypocoristic"
    />

    <UserPut
      type="password"
      UserText="密码"
      :rule="UserPassrule"
      errMsg="密码错误"
      @valChanged="setPassword"
    />

    <UserBtn LoginText="注册" @clicked="login" />
  </div>
</template>

<script>
import UserPut from "../components/UserPut";
import UserBtn from "../components/UserBtn";
export default {
  components: {
    UserPut,
    UserBtn
  },
  data() {
    return {
      username: "",
      password: "",
      pocoristic: "",
      Usernamerule: "^\\d{5,11}$",
      UserPocorrule: "^\\w{5,11}$",
      UserPassrule: "^.{3,9}$"
    };
  },
  methods: {
    login() {
      console.log("父组件接收到按钮子组件的点击事件, 触发自己的登录函数");
      // 登录请求就需要 用户名和密码的数据
      // 这里直接通过 this.username / this.password 拿到用户输入数据
      // console.log("用户名", this.username);
      // console.log("密码", this.password);
      // console.log("昵称", this.pocoristic);

      if (this.username == "" || this.password == "" || this.pocoristic == "") {
        this.$toast.fail("请填写完整信息");
        return;
      }
      const regExppocor = new RegExp(this.Usernamerule);
      if (!regExppocor.test(this.pocoristic)) {
        this.$toast.fail("昵称格式不对");
        return;
      }
      const regExpname = new RegExp(this.Usernamerule);
      if (!regExpname.test(this.username)) {
        this.$toast.fail("用户名格式不对");
        return;
      }
      const regExpPass = new RegExp(this.UserPassrule);
      if (!regExpPass.test(this.password)) {
        this.$toast.fail("密码格式不对");
        return;
      }
      this.$axios({
        url: "http://127.0.0.1:3000/register",
        method: "POST",
        data: {
          nickname: this.pocoristic,
          password: this.password,
          username: this.username
        }
      }).then(res => {
        if (res.data.message == "注册成功") {
          this.$toast.success(res.data.message);
        } else {
          this.$toast.fail(res.data.message);
        }
      });
    },
    setUsername(username) {
      this.username = username;
    },
    setPassword(password) {
      this.password = password;
    },
    Sethypocoristic(pocoristic) {
      this.pocoristic = pocoristic;
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  background-color: rgb(230, 239, 247);
  .out {
    padding: 6.667vw;
    .iconicon-test {
      font-size: 6.667vw;
    }
  }
  .logo {
    text-align: center;
    .iconnew {
      font-size: 35vw;
      color: #d81e06;
    }
  }
}
</style>